<template>
  <div class="left side-menu">
    <div class="sidebar-inner slimscrollleft">
      <!-- User -->
      <div class="user-box">
        <div class="user-img">
          <img
            src="/static/assets/images/users/avatar-1.jpg"
            alt="user-img"
            title="Mat Helme"
            class="img-circle img-thumbnail img-responsive"
          >
          <div class="user-status offline">
            <i class="zmdi zmdi-dot-circle"></i>
          </div>
        </div>
        <h5>
          <!--<a>{{this.user.name}}</a>-->
          <a>{{this.user.name}}</a>
        </h5>
        <ul class="list-inline">
          <li>

          <el-popover
                placement="top"
                width="160"
                v-model="visible_0">
                <p>确定退出登录吗？</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible_0 = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="visible_0 = false;logOut()">确定</el-button>
                </div>
                <el-button type="text" class="text-custom" slot="reference">
                    <i class="zmdi zmdi-power"> 注销</i>
                </el-button>
            </el-popover>

          </li>
        </ul>
      </div>
      <!-- End User -->

      <!--- Sidemenu -->
      <div id="sidebar-menu">
        <ul v-if="this.$store.state.permission=='超管'">
          <li>
            <router-link to="/manage/workerinfo" class="waves-effect">
              <i class="el-icon-user"></i>
              <span>人员信息</span>
            </router-link>
          </li>
          <li>
            <router-link to="/manage/groupinfo" class="waves-effect">
              <i class="el-icon-chat-round"></i>
              <span>群组信息</span>
            </router-link>
          </li>
          <li>
            <router-link to="/manage/addworker" class="waves-effect">
              <i class="el-icon-plus"></i>
              <span>添加人员</span>
            </router-link>
          </li>
        </ul>
        <ul v-if="this.$store.state.permission=='管理员'">
          <li>
            <router-link to="/manage/workerinfo" class="waves-effect">
              <i class="el-icon-user"></i>
              <span>员工信息</span>
            </router-link>
          </li>
          <li>
            <router-link to="/manage/groupinfo" class="waves-effect">
              <i class="el-icon-chat-round"></i>
              <span>群组信息</span>
            </router-link>
          </li>
          <li>
            <router-link to="/manage/addworker" class="waves-effect">
              <i class="el-icon-plus"></i>
              <span>添加员工</span>
            </router-link>
          </li>
        </ul>

        <div class="clearfix"></div>
      </div>
      <!-- Sidebar -->
      <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
          // 用户的基本信息
          user:'',
          groups:['A','B'],
          visible_0:false,
      }
  },
  methods: {
      // 调用父类方法来设置选中属性来获取页面属性
    setSelectGroup(group){
        this.$parent.setSelectGroup(group);
    },
    open_error(mes) {
      this.$notify.error({
        title: "错误",
        message: mes,
        position: "bottom-right"
      });
    },
    open_success(mes) {
      this.$notify.success({
        title: "成功",
        message: mes,
        position: "bottom-right"
      });
    },
    // 检测到token失效，跳转到登录页
    jump_to_login(){
        this.open_error("认证已经过期，已自动跳转到登录页面");
        this.$router.push({path:"/signin"});
    },
    // 注销
    logOut(){
        this.$axios.post('/api/taoyun/v1/logout')
        .then((res) => {
            if(res.data.code=="200"){
                localStorage.clear();
                this.open_success("退出登录成功！");
                this.$router.push({path:'/signin'});
            }
            else{
                this.open_error("退出登录失败，请稍后重试！");
            }
        })
        .catch((err) => {
           console.log(err);
        });
    },

  },
  props:['userInfo','groupIds'],
  created() {
      // 把父组件传给来的值拿到自己里面  方便修改和使用
      this.user=this.userInfo;
    //   this.groups=this.groupIds;
  },
};
</script>

<style>
</style>
